"use client"
import { motion } from "framer-motion"
import { Globe } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

interface LanguageSwitcherProps {
  currentLang: "zh" | "en"
  onLanguageChange: (lang: "zh" | "en") => void
}

export function LanguageSwitcher({ currentLang, onLanguageChange }: LanguageSwitcherProps) {
  const languages = [
    { code: "zh" as const, name: "中文", flag: "🇨🇳" },
    { code: "en" as const, name: "English", flag: "🇺🇸" },
  ]

  const currentLanguage = languages.find((lang) => lang.code === currentLang)

  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
          <Button variant="ghost" size="sm" className="language-switch text-white hover:text-blue-300">
            <Globe className="w-4 h-4 mr-2" />
            <span className="hidden sm:inline">
              {currentLanguage?.flag} {currentLanguage?.name}
            </span>
            <span className="sm:hidden">{currentLanguage?.flag}</span>
          </Button>
        </motion.div>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="filter-dropdown">
        {languages.map((language) => (
          <DropdownMenuItem
            key={language.code}
            onClick={() => onLanguageChange(language.code)}
            className={`cursor-pointer text-white hover:bg-white/10 ${
              currentLang === language.code ? "bg-blue-500/20" : ""
            }`}
          >
            <span className="mr-2">{language.flag}</span>
            {language.name}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
